<template>
  <div class="driver-manage-container">
    <div class="all-header">
      <div class="current-header">
        <div class="header-left" @click="goHome">
          <img class="driver-logo" :src="basicSettingData?.logoImg || DefaultLogo" alt="" />
        </div>
        <div class="header-right">
          <el-popover
            ref="userMenuPopover"
            placement="bottom-end"
            :width="240"
            :hide-after="0"
            :offset="10"
            trigger="hover"
            :show-arrow="false"
            popper-class="user-menu-popover"
            popper-style="border: 1px solid var(--art-border-dashed-color); border-radius: calc(var(--custom-radius) / 2 + 4px); padding: 5px 16px; 5px 16px;"
          >
            <template #reference>
              <div style="display: flex; justify-content: center; align-items: center">
                <img class="cover" :src="userInfo.avatar || userDefaultAvatar" />
                <div>{{ userInfo.name }}</div>
                <el-icon><CaretBottom /></el-icon>
              </div>
            </template>
            <template #default>
              <div class="user-menu-box">
                <div class="user-head">
                  <img
                    class="cover"
                    :src="userInfo.avatar || userDefaultAvatar"
                    style="float: left"
                  />
                  <div class="user-wrap">
                    <span class="name">{{ userInfo.username }}</span>
                    <span class="email" v-if="userInfo.email">{{ userInfo.email }}</span>
                    <span> ID: {{ userInfo.id }}</span>
                  </div>
                </div>
                <ul class="user-menu">
                  <li @click="goPage('/drivingSchoolConsole/set')">
                    <i class="menu-icon iconfont-sys">&#xe755;</i>
                    <span class="menu-txt">{{ $t('topBar.user.userSet') }}</span>
                  </li>
                  <div class="line"></div>
                  <div class="logout-btn" @click="loginOut">
                    {{ $t('topBar.user.logout') }}
                  </div>
                </ul>
              </div>
            </template>
          </el-popover>
        </div>
      </div>
    </div>

    <div class="driver-container">
      <div class="add-container">
        <div class="step-container">
          <div
            class="step-item"
            v-for="(item, index) in stepList"
            :key="item.value"
            :class="{ active: stepIndex === item.value }"
          >
            <div class="step-circle">{{ item.value }}</div>
            <div class="step-text">{{ item.label }}</div>
            <div class="line" v-if="index !== stepList.length - 1"></div>
          </div>
        </div>

        <div class="info-container">
          <driving-school-info-step
            v-if="stepIndex === 1"
            @next-step="handleNextStep"
          ></driving-school-info-step>

          <combo-select-step
            v-if="stepIndex === 2"
            @success="handleNextStep"
            @back="handlePrevStep"
            @end="stepIndex = 4"
          ></combo-select-step>

          <pay-step
            v-if="stepIndex === 3"
            @success="handleNextStep"
            @back="handlePrevStep"
          ></pay-step>

          <result-step v-if="stepIndex === 4"></result-step>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useI18n } from 'vue-i18n'
  import { ref } from 'vue'
  import { ElMessageBox } from 'element-plus'
  import { CaretBottom } from '@element-plus/icons-vue'
  import userDefaultAvatar from '@/assets/img/user_logo.jpg'
  import { getSystemSetting } from '@/api/ApiList'
  import DrivingSchoolInfoStep from './components/DrivingSchoolInfoStep.vue'
  import ComboSelectStep from './components/ComboSelectStep.vue'
  import PayStep from './components/PayStep.vue'
  import ResultStep from './components/ResultStep.vue'

  import { useUserStore } from '@/store/modules/user'
  import DefaultLogo from '@/assets/img/drivingSchoolLogo.png'
  const userStore = useUserStore()

  const stepList = [
    {
      label: '完善驾校信息',
      value: 1
    },
    {
      label: '套餐选择',
      value: 2
    },
    {
      label: '确认付款',
      value: 3
    },
    {
      label: '完成',
      value: 4
    }
  ]

  const isAuditInfo = ref<any>()
  const stepIndex = ref(1)
  const basicSettingData = ref()

  const { t } = useI18n()

  const route = useRoute()
  const router = useRouter()

  const userMenuPopover = ref()
  const userInfo = computed(() => userStore.getUserInfo)

  watch(
    () => route.query.step,
    (newVal) => {
      if (newVal) {
        stepIndex.value = Number(newVal)
      } else {
        stepIndex.value = 1
      }
    }
  )

  const goPage = (path: string) => {
    router.push(path)
  }

  const closeUserMenu = () => {
    setTimeout(() => {
      userMenuPopover.value.hide()
    }, 100)
  }

  function handleNextStep() {
    stepIndex.value++
  }

  function handlePrevStep() {
    stepIndex.value--
  }

  function goHome() {
    router.push('/drivingSchoolConsole/schoolConsole')
  }

  const loginOut = () => {
    closeUserMenu()
    setTimeout(() => {
      ElMessageBox.confirm(t('common.logOutTips'), t('common.tips'), {
        confirmButtonText: t('common.confirm'),
        cancelButtonText: t('common.cancel'),
        customClass: 'login-out-dialog'
      }).then(() => {
        userStore.logOut()
      })
    }, 200)
  }

  async function getSystemData() {
    const res = await getSystemSetting({
      configCode: 'STORE_CONFIG'
    })
    if (res.code === '00000') {
      isAuditInfo.value = JSON.parse(res.data.configJson)
    }
  }

  onMounted(() => {
    getSystemData()

    let basicSettingInfo = JSON.parse(localStorage.getItem('lty-website-basic-type') || '{}')
    if (basicSettingInfo.title) {
      basicSettingData.value = basicSettingInfo
    }

    if (route.query.step) {
      stepIndex.value = Number(route.query.step)
    }
  })
</script>

<style lang="scss" scoped>
  @use './style.scss';
  .driver-manage-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    .all-header {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-height: 80px;
      // margin-bottom: 50px;
      border-bottom: 1px solid #f5f7fa;

      .current-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 1400px;
        height: 80px;

        .header-left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 100%;
          width: 130px;

          .driver-logo {
            height: 42px;
          }

          .driver-name {
            font-size: 20px;
          }
        }

        .header-right {
          display: flex;
          justify-content: center;
          align-items: center;

          .cover {
            width: 30px;
            height: 30px;
            margin: 0 10px 0 0;
            overflow: hidden;
            background: #eee;
            border-radius: 50%;
          }
        }
      }
    }

    .driver-container {
      flex: 1;
      padding-top: 32px;
      width: 100%;
      background-color: #f5f7fa;
      height: calc(100vh - 160px);
      font-size: 14px;
      display: flex;
      flex-direction: column;

      .add-container {
        width: 1400px;
        margin: 0 auto;

        .step-container {
          display: flex;
          align-items: center;

          border-radius: 8px;
          padding: 40px 20px;
          background: #fff;
          width: 100%;
          margin-bottom: 20px;
          height: 120px;
          box-sizing: border-box;

          .step-item {
            display: flex;
            align-items: center;
            flex: 1;

            .step-circle {
              width: 38px;
              height: 38px;
              line-height: 38px;
              background: #fff;
              border: 1px solid #bfbebe;
              color: #bfbebe;
              font-weight: 600;
              font-size: 22px;
              margin-right: 6px;
              text-align: center;
              border-radius: 50%;
            }

            .step-text {
              color: #999;
              font-size: 15px;
            }

            .line {
              flex: 1;
              height: 1px;
              background: #bfbebe;
              margin: 0 20px;
            }

            &.active {
              .step-circle {
                background: var(--el-color-primary);
                color: #fff;
              }

              .step-text {
                color: #333;
              }
            }
          }
        }
      }
    }

    .info-container {
      flex: 1;
      border-radius: 8px;
      padding: 40px 20px;
      background: #fff;
      width: 100%;
      margin-bottom: 20px;
      box-sizing: border-box;
    }
  }
</style>
